<template>
  <div class="itme_noPower" :class="isRank?'rankType':''">
    <img :src="bg" v-if="bgUrl" />
    <div class="root_text_box" :style="{'height':elHeight}" v-else>
      <i class="lock" v-if="showIcon"></i>
      <p>会员权限不足，请{{msgText}}</p>
      <div class="btn" @click="popBox">{{btnText}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'noPower',
  props: ['bg', 'height', 'icon', 'isRank', 'minLeve'],
  data() {
    return {
      bgUrl: '',
      elHeight: '',
      btnText: '',
      showIcon: true
    };
  },
  created() {
    if (typeof this.icon == 'boolean') this.showIcon = this.icon;
    let vLevel = localStorage.getItem('vipLevel');
    if (vLevel == '0') {
      this.msgText = '开通会员';
      this.btnText = '立即开通';
    } else {
      this.msgText = '升级会员';
      this.btnText = '立即升级';
    }
    if (this.bg) {
      this.bgUrl = this.bg;
    }
    if (this.height) {
      this.elHeight = this.height;
    }
  },
  methods: {
    popBox() {
      let that = this;
      let minLevel = '';
      if(that.minLeve){
        minLevel = that.minLeve
      }else{
        let uLevel = localStorage.getItem('vipLevel');
        minLevel = this.upLevel(uLevel);
      }
      if(this.$isZsjxApp){
        this.$popVip({ //弹出购买弹框
          show: true,
          obj: that.$router,
          minLeve: minLevel
        });
      }else{
        this.$router.push({path:'/buyVip',query:{'vLevel':minLevel}});
      }
    },
    upLevel(level){  //获取比当前等级大一级的vip级别
      let aLevel = '';
      if(level == 0 || level == 3){
        aLevel = 4;
      }else if(level == 4){
        aLevel = 5;
      }else if(level == 5 || level == 1){
        aLevel = 2;
      }
      return aLevel;
    },
  }
};
</script>
<style scoped lang="stylus">
@import './../common/common.styl';

.itme_noPower {
  img {
    width: 100%;
  }

  .root_text_box {
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    // background-color rgba(0,0,0,.5)
    i {
      display: inline-block;
      width: rem(80);
      height: rem(80);
      margin-bottom: rem(20);
      bgp('./../assets/img/lock.png');
    }

    p {
      font-size: rem(28);
      text-align: center;
      color: #888;
      margin-bottom: rem(30);
    }

    .btn {
      width: rem(160);
      height: rem(60);
      line-height: rem(60);
      background: #fd7f2c;
      border-radius: 10px;
      font-size: rem(26);
      color: #fff;
      text-align: center;
    }
  }

  &.rankType {
    .root_text_box {
      height: 3rem;
      padding-bottom: rem(20);

      p {
        font-size: rem(24);
      }

      .btn {
        font-size: rem(22);
        width: rem(140);
        height: rem(50);
        line-height: rem(50);
        border-radius: 8px;
      }
    }
  }
}
</style>